<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JavaScript-单dom节点</title>
    <style>

        .box{
            width:100px;
            height: 100px;
            border: 1px solid;
        }

        .success{
            background-color: #00FF00;
        }

    </style>
</head>
<body>

<div id="box1" >



</div>

</body>
<script>
    /**
     *     DOM
     *       单节点
     *  1. 通过选择器 获得dom节点的引用
     *  2. 对单个dom节点进行修改
     *        1. 内容--- innerHTML innerText
     *        2. 属性---
     *                 一般属性：id src href
     *                 样式：style class --- className classList
     *                 事件：click、change、mouseover
    * */

   // var box1= document.getElementsByTagName('div')[0];  // 返回一组dom节点
     var box1= document.getElementById('box1'); // 返回单独的dom节点
     box1.innerHTML = "<h1>hello</h1>";
     box1.id = "box2";
     box1.style.color="red";
   //  box1.className = "box success";
      box1.classList.add('box');
     box1.classList.add('success');
     box1.onclick = function () {
         alert(this.innerHTML); // this 指向处理函数关联的dom对象
     }

</script>
</html>